/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 新零售，每日出库率排名
 *  */
import React, { useState, useCallback, useRef, useEffect } from "react";
import { connect } from "dva";
import { useInterval } from "ahooks";
import { Chart, Geom, Axis, Tooltip, Label } from "bizcharts";
import DataSet from "@antv/data-set";
import moment from "moment";
import CommonBorder from "./Wrappers/CommonBorder";
import NoDate from "./Wrappers/NoDate";
import { axisLabel, gradualTextColumn } from "./_utils";

const ds = new DataSet();

const cols = {
  date: {
    type: "cat",
  },
};

const OutRate = ({ token, dispatch, isParentFull, loading }) => {
  const heightRef = useRef({});
  const [height, setHeight] = useState(0);
  const [list, setList] = useState([]);
  const [hasData, setHasData] = useState(false);
  const timer = useRef(null);

  const fetchData = useCallback(
    () => {
      dispatch({
        type: "chartData/getOutRate",
        payload: {
          token,
        },
      }).then((res = []) => {
        const val = ds
          .createView()
          .source(res)
          .transform({
            type: "fold",
            fields: ["num"], // 展开字段集
            key: "type", // key字段
            value: "num", // value字段
            retains: ["date"], // 保留字段集，默认为除 fields 以外的所有字段
          });
        setHasData(res.length > 0);
        setList(val);
      });
    },
    [dispatch, token]
  );

  useEffect(
    () => {
      timer.current = setTimeout(() => {
        heightRef.current && setHeight(heightRef.current.clientHeight);
      }, 1000);
      return () => {
        timer.current && clearTimeout(timer.current);
      };
    },
    [isParentFull, heightRef]
  );

  useEffect(fetchData, [fetchData]);

  useInterval(fetchData, 60 * 60 * 1000);

  return (
    <CommonBorder title="3日出库率" loading={loading}>
      <div style={{ height: "100%" }} ref={heightRef}>
        {hasData ? (
          <Chart
            style={{ backgroundColor: "rgba(15, 24, 55, 0.7)" }}
            plotBackground={{
              fill: "#7d95f3",
              fillOpacity: 0.05,
              stroke: "#7d95f3",
              strokeOpacity: 0.1,
              lineWidth: 1,
              radius: 2,
            }}
            scale={cols}
            height={height}
            data={list}
            forceFit
            padding={[50, "auto", "auto", "auto"]}
          >
            <Axis
              name="date"
              label={{ ...axisLabel, formatter: val => moment(val).format("DD") }}
              tickLine={null}
            />
            <Axis
              grid={null}
              name="num"
              label={{
                ...axisLabel,
              }}
            />
            <Tooltip
              crosshairs={{
                type: "y",
              }}
            />
            <Geom
              type="areaStack"
              position="date*num"
              tooltip={false}
              color={["type", ["l (90) 0:rgba(28, 51, 92, 1) 1:rgba(28, 51, 92, 0.1)"]]}
              size={2}
            >
              <Label
                content="num"
                formatter={val => `${val}%`}
                textStyle={{
                  fill: gradualTextColumn, // 文本的颜色
                  fontSize: "14", // 文本大小
                  fontWeight: "bold", // 文本粗细
                }}
                textAlign="center"
              />
            </Geom>
            <Geom
              type="lineStack"
              position="date*num"
              size={2}
              color={["type", ["l (180) 0:rgba(115, 211, 235, 1) 1:rgba(115, 211, 235, 0.3)"]]}
              tooltip={[
                "date*num",
                (date, num) => {
                  return {
                    name: `${date}`,
                    title: "出库率",
                    value: `${num}%`,
                  };
                },
              ]}
            />
          </Chart>
        ) : (
          <NoDate title="暂无数据" style={{ height }} />
        )}
      </div>
    </CommonBorder>
  );
};

export default connect(({ global, loading }) => ({
  token: global.screenToken,
  loading: loading.effects["chartData/getOutRate"],
}))(OutRate);
